<!--  -->
<template>
  <div>
         <ul>
          <!-- <router-link to="/newsinfo?id=1" v-for="item in newslist" :key="item.newsId"> -->
          <!-- <router-link :to="'/newsinfo?id='+item.newsId+'&password=123'" v-for="item in newslist" :key="item.newsId"> -->
          <!-- <router-link :to="{path:'/newsinfo',query:{id:item.newsId,pwd:'123',age:18,gender:'男'}}" v-for="item in newslist" :key="item.newsId"> -->
          <!-- <router-link :to="{name:'NewsInfo',query:{id:item.newsId,pwd:'123',age:18,gender:'男'}}" v-for="item in newslist" :key="item.newsId"> -->
          <router-link :to="'/newsinfo/'+item.newsId" v-for="item in newslist" :key="item.newsId">
          <!-- <router-link :to="{name:'NewsInfo',params:{id:item.newsId,pwd:'123456'}}" v-for="item in newslist" :key="item.newsId"> -->
            <li>
                <div class="news-item">
                  <div class="news-left">
                    <img :src="item.pic" >
                  </div>
                  <div class="news-right">
                    <h3>{{item.title}}</h3>
                    <div class="info">
                      <span>{{item.time}}</span>
                      <span>{{item.src}}</span>
                    </div>
                  </div>
                </div>
            </li>
          </router-link>
      </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  props:{
    newslist:{
        type:Array,
        default:function(){
            return []
        }
    }
  },

  methods: {
        goToDetail(id){
      this.$router.push({name:'NewsInfo',params:{id}},()=>{
      // 路由跳转成功会触发
      },(err)=>{
        // 路由跳转失败会触发
        console.log(err);
      })
    }
  },
  
}

</script>
<style lang='scss' scoped>
*{
  margin: 0;
  padding: 0;
}
.news-list{
  h1{
    font-size: 18px;
    text-align: center;
  }
  ul{
    list-style: none;
    margin-bottom: 40px;
    li{
      border-top: 1px solid #999;
      padding: 10px 0;
      .news-item{
        display: flex;
        .news-left{
            flex: 1;
            img{
              width: 100%;
              height: 80px;
            }
        }
        .news-right{
            flex: 3;
            margin-left: 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            h3{
              font-size: 18px;
              font-weight: 600;
            }
            .info{
              font-size: 10px;
              color: #333;
              span:nth-child(2){
                margin-left: 10px;
              }
            }
        }
      }
      
    }
  }
}
</style>